<template>
  <div id="container">
    <!-- 商品信息 -->
    <div class="goodslist">
      <li
        v-for="(item, index) in goodslist"
        :key="index"
        @mousedown.stop="move(item, { type: '' }, $event)"
        style="fontsize: 10px"
        :style="{ left: item.left + 'px', top: item.top + 'px' }"
      >
        {{ item.label }}
      </li>
      <div
        v-for="item in qrcodelistProps"
        :key="item.label"
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
          width: item.width + 'mm',
          height: item.height + 'mm',
        }"
        @mousedown.stop="move(item, { type: '' }, $event)"
        class="qrcode"
      >
        {{ item.label }}
      </div>
      <div
        @mousedown.stop="move(item, { type: '' }, $event)"
        v-for="item in sublinelist"
        :key="item.name + item.index"
        :style="{
          left: item.left + 'px',
          top: item.top + 'px',
          width: item.direction == 1 ? item.length + 'mm' : 0,
          height: item.direction == 2 ? item.length + 'mm' : 0,
          borderStyle: borderStyleList[item.line_type],
          borderWidth: item.size + 'px',
          borderColor: '#111',
        }"
        class="line"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodslistProps: {
      type: Array,
    },
    qrcodelistProps: {
      type: Array,
    },
    sublineProps: {
      type: Array,
    },
  },
  data() {
    return {
      borderStyleList: {
        1: "solid",
        2: "dashed",
        3: "dotted",
      },
      borderDirection: {
        1: "Top",
        2: "Left",
      },
    };
  },
  computed: {
    goodslist() {
      return this.goodslistProps;
    },
    qrcodelist() {
      return this.qrcodelistProps;
    },
    sublinelist() {
   
      return this.sublineProps;
    },
  },
  // watch: {
  //   sublinelist: {
  //     handler(val) {
  //       console.log("val", val);
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },
  methods: {
    /* 
    params 对象
    type:vertical row

     */
    move(item, params, e) {
    

      // 元素信息
      let elementWidth = e.path[0].offsetWidth;
      let elementHeight = e.path[0].offsetHeight;
      // 父级元素的信息
      let fatherWidth = e.path[1].offsetWidth;
      let fatherHeight = e.path[1].offsetHeight;
      let odiv = e.target; //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        if (elementWidth + left > fatherWidth) {
          left = fatherWidth - elementWidth;
        }
        if (fatherHeight - elementHeight < top) {
          top = fatherHeight - elementHeight;
        }
        left = left < 0 ? 0 : left;
        top = top < 0 ? 0 : top;
        if (params.type && params.type == "vertical") {
          top = 0;
        }

        //移动当前元素
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
        odiv.classList.add("active");
        //更新元素的绝对定位地址
        item.top = top;
        item.left = left;
      };
      document.onmouseup = (e) => {
        odiv.classList.remove("active");
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  position: relative;
  width: 100%;
  height: 100%;
}
li {
  list-style: none;
}
.clear {
  clear: both;
}
.active {
  background-color: #03a98e !important;
}

// 商品信息
.goodslist {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  li {
    position: absolute;
    cursor: move;
    background-color: #000;
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
  }
}
.qrcode {
  position: absolute;
  background-color: #caf9bd;
  // background-color: red;
  border: 1px solid #888;
  z-index: 999;
  cursor: move;
  // resize: both;
  // overflow: auto;
}
.line {
  position: absolute;
  z-index: 500;
  cursor: pointer;
}
</style>